<template>
    <main class="main">
        <PersonInfo :userId='userId' v-if="userId"></PersonInfo>
        <SongSheetRanking :userId='userId' v-if="userId"></SongSheetRanking>
        <CreateSongSheet :userId='userId' v-if="userId"></CreateSongSheet>
    </main>
</template>

<script setup>
    // 组件
    import PersonInfo from './PersonInfo.vue'
    import SongSheetRanking from './SongSheetRanking.vue'
    import CreateSongSheet from './CreateSongSheet.vue'
    import { ref } from 'vue';
    import { useStore } from 'vuex';
    const store = useStore();
    
    let userId = ref(null);
    store.dispatch('getUserId').then(() => {
        userId.value = store.state.userId;
    })
    
</script>

